<template>
  <div class="h-[calc(100%-60px)]">
    <div class="h-[100%] overflow-auto">
      <div class="px-[8px] py-[8px] w-[100%]">
        <customs-info :data="listData?.prediction" />
        <shop-info :data="listData?.prediction_skus_aggregate" />
        <declare-info :data="listData?.prediction_declares" />
        <invoice-info :data="listData?.prediction_invoices" :info="listData" />
        <packing-info :data="listData?.prediction_boxes" :info="listData" />
        <contractInfo :data="listData?.prediction_contracts" />
      </div>
    </div>
    <div
      class="flex items-center justify-center bg-[var(--base-color)] py-[10px] shadow-[0_-3px_6px_0_rgba(51,102,241,0.1)] relative z-10 ml-[8px]"
    >
      <el-button size="large" @click="handleCancel" :disabled="loading">
        取消
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import customsInfo from "./customsInfo/index.vue";
import shopInfo from "../add/shopInfo/index.vue";
import declareInfo from "../add/declareInfo/index.vue";
import invoiceInfo from "../add/invoiceInfo/index.vue";
import packingInfo from "../add/packingInfo/index.vue";
import contractInfo from "./contractInfo/index.vue";
import { predictionDetail } from "../api/index.js";
import action from "@/utils/action.js";
const loading = ref(false)
const route = useRoute();
onMounted(() => {
  const { id } = route.query;
  if (id) {
    getDetail(id);
  }
});
const currencyAndRate = ref({
  currency: null,
  exchange_rate: null,
});
provide(
  "currencyAndRate",
  computed(() => {
    return currencyAndRate.value;
  })
);
const listData = ref({});
const getDetail = (id) => {
  predictionDetail({ id }).then((res) => {
    res.data.prediction_boxes.box_date = res.data?.prediction?.declare_date;
    res.data.prediction_boxes.invoice_no =
      res.data?.prediction_invoices?.invoice_no;
    listData.value = res?.data || {};
  });
};
const handleCancel = () => {
  action.setGlobalState({
    changeMicoTabsPath: {
      type: "closeActiveTab",
    },
  });
};
</script>
<style lang="scss" scoped></style>
